<template>
    <suspense>
        <template #default>
            <color-com 
                :message="parentMessage"
                :info="comInfo"
                @childEvent="handleChildEvent"   />
        </template>
        <template #fallback>
            <div> 
                加载中...
            </div>
        </template>
    </suspense>    
    <div>{{ childMsg }}</div>
</template>
<script lang="ts" setup>
    import { defineAsyncComponent, provide, reactive, ref } from 'vue'
    const ColorCom = defineAsyncComponent(()=>import('./components/colorCom.vue'))
    // const ColorCom = defineAsyncComponent({
    //     loader: ()=>import('./components/colorCom.vue'),
    //     delay:20000,
    //     timeout: 3000
    // })
    let parentMessage = ref('我来自于父级组件')
    let comInfo = reactive({
        name: 'colorTheme'
    })
    let childMsg = ref('等待子组件的消息...')
    const handleChildEvent = (payload:string)=>{
        console.log('接收到来做子组件的数据', payload)
        childMsg.value = payload
    }
    provide('msg','我是通过provide方式传递给子组件的信息')

    let textMsg = ref('需要改变的信息')
    const changeMsgFn = ()=>{
        textMsg.value = '我已经发生改变了'
    }
    provide('provideInfo',{
        textMsg,
        changeMsgFn
    })

    let sbzz = ref<string>('恶心')
    
    let arr = ref<Array<string>>(['a'])
    let arr1 = ref<string[]>(['a'])

</script>
<style lang="scss" scoped>

</style>
